<template>
    <el-dialog title="申领单" :visible.sync="dialogFormVisible" width="70%" :append-to-body="true"
    @close="dialogClose">
      <el-form :inline="true" status-icon>
          <el-row>
            <el-form-item label="申领单号">
                <el-input v-model="applyOrderInfo.famid" placeholder="申领单号" value-key="famid" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-select v-model="applyOrderInfo.feid"  placeholder="请选择">
                <el-option v-for="item in empList" :key="item.feid" :label="item.fename" :value="item.feid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-select v-model="applyOrderInfo.fwhid"  placeholder="请选择">
                <el-option
                  v-for="item in warehouseList"
                  :key="item.fwhid"
                  :label="item.fwhname"
                  :value="item.fwhid">
                </el-option>
              </el-select>
        </el-form-item>
          <el-form-item label="申领日期">
            <el-date-picker v-model="applyOrderInfo.famdate" type="date" :default-time="famdate" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" />
          </el-form-item>
          </el-row>
      </el-form>
      <el-form>
        <el-form-item label="备注" >
            <el-input v-model="applyOrderInfo.fammemo"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
        </el-form-item>
      </el-form>
      <!-- 按钮部分 -->
      <el-form>
        <el-form-item>
            <el-button type="primary" @click="addMaterial">新增物资</el-button>
            <el-button type="primary" @click="resetMaterial">清空物资</el-button>
            <el-button type="primary" @click="submitForm(applyOrderInfo)">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 -->
      <el-table :data="applyOrderInfo.applyForChildOrderVoList" style="width: 100%">
        <el-table-column prop="famid" label="申领单号" width="100" sortable />
        <el-table-column prop="fmid" label="物资编号" width="100" sortable />
        <el-table-column prop="fmname" label="物资名称" width="100" sortable />
        <el-table-column prop="facquantity" label="申领数量" width="200" sortable />
        <el-table-column prop="facmemo" label="备注" width="200" sortable />
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="big" @click="vueDelete(scope.row)">删除</el-button>
                <el-button type="primary" size="big"  @click="vueEdit(scope)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    
    <!-- 物资信息对话框 -->
    <el-dialog title="物资信息" :visible.sync="materialVisible" width="70%" :append-to-body="true" close-on-click-modal="false" close-on-press-escape
    destroy-on-close="true" @close="materialDialogClose">
    <!-- 查询表单 -->
    <el-form :inline="true">
        <el-form-item>
            <el-autocomplete v-model="searchObj.fmid" :trigger-on-focus="false" class="inline-input" placeholder="物资编号" value-key="fmid" />
          </el-form-item>
        <el-form-item>
          <el-autocomplete v-model="searchObj.fmname" :trigger-on-focus="false" class="inline-input" placeholder="物资名称" value-key="fmname" />
        </el-form-item>
        <el-form-item>
            <el-select v-model="searchObj.fmkind" clearable placeholder="物资种类">
                <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-autocomplete v-model="searchObj.fmbrand" :trigger-on-focus="false" class="inline-input" placeholder="品牌" value-key="fmbrand" />
        </el-form-item>
        <el-form-item>
            <el-autocomplete v-model="searchObj.fmtype" :trigger-on-focus="false" class="inline-input" placeholder="型号" value-key="fmtype" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="materialFetch()">查询</el-button>
          <el-button type="default" @click="materialReset()">清空</el-button>
        </el-form-item>
      </el-form>    
    <!-- 表格部分代码 -->
    <el-table :data="materialList" style="width: 100%;">

        <el-table-column prop="fmid" label="物资编号" width="100" sortable/>
        <el-table-column prop="fmname" label="物资名称" width="100" sortable/>
        <el-table-column label="物资种类" width="100" prop="fmkind" sortable>
            <template slot-scope="scope">
                <el-tag type="warning" effect="dark" v-if="scope.row.fmkind==1">设备</el-tag>
                <el-tag type="danger" effect="dark" v-else-if="scope.row.fmkind==2">耗材</el-tag>
                <el-tag type="danger" effect="dark" v-else>未知</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="fmbrand" label="品牌" width="100" sortable />
        <el-table-column prop="fmtype" label="型号" width="100" sortable />
        <el-table-column prop="fmspec" label="主要参数" width="150" sortable />
        <el-table-column prop="fmunit" label="计量单位" width="100" sortable />
        <el-table-column prop="fmdesc" label="详细描述" width="200" sortable />
        <el-table-column prop="fmmemo" label="备注" width="150" sortable />
        <el-table-column width="150" label="操作" sortable>
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="materialAdd(scope.row)">添加</el-button>
            </template>
        </el-table-column>     
    </el-table>
    </el-dialog>
    <el-dialog title="物资信息" :visible.sync="confirmVisible" width="30%" :append-to-body="true" close-on-click-modal close-on-press-escape
        @close="confirmDialogClose" model="false">
        <el-form>
            <!-- <el-form-item label="物资编号">
                <el-input v-model="confirmMaterialInfo.fmid" placeholder="请输入内容" />
            </el-form-item> -->
            <el-form-item label="物资名称">
                <el-input v-model="confirmMaterialInfo.fmname" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="物资数量">
                <el-input-number v-model="confirmMaterialInfo.facquantity" :min="1" :max="99999" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="confirmMaterialInfo.facmemo"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmSubmit(confirmMaterialInfo)">提交</el-button>
            </el-form-item>
            
        </el-form>
        </el-dialog>
    </el-dialog>
</template>
<script>
import moment from 'moment'
import { getEmpList } from '@/api/emp'
import { getWarehouseList } from '@/api/warehouse'
import { getMaterialList } from '@/api/material'
import { updateApplyOrder, createApplyOrder } from '@/api/applyOrder'

export default {
    props: {
        dialogFormVisible: Boolean,
        editApplyForOrder: {
            type: Object,
            default: {}
        },
        updateOrCreate: Boolean,
        isWatch: Boolean,
    },
    data() {
        return {
            empList: {},
            applyOrderInfo: {
                applyForChildOrderVoList: [],
                searchStartDate: null,
                searchEndDate: null,
                fauditid: null,
                fename: null,
                famstatus: "0",
                fauditname: null,
                famid: null,
                famdate: null,
                fammemo: null,
                feid: null,
                fwhid: null,
                fwhname: null
            },
            materialVisible: false,
            confirmVisible: false,
            confirmMaterialInfo: {},
            searchObj: {},
            materialList: {},
            warehouseList: {},
            updateId: null
        }
    },
    created () {
        this.vueInit()
        if (this.updateOrCreate) {
            this.applyOrderInfo = this.editApplyForOrder
        }else {
            this.applyOrderInfo.famdate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
        }
    },
    updated () {
       
        
    },
    methods: {
         // 事件格式化 利用momeent 模块 npm install moment
         dateFormat: function(row,column) {
            var date = row[column.property]
            if (date == undefined) {
                return ""
            }
            return moment(date).format("YYYY-MM-DD")
        },
        vueInit() {
            getEmpList().then(response => {
                this.empList = response.data.empList
            })
            getMaterialList(this.searchObj).then(response => {
                this.materialList = response.data.materialList
            })
            getWarehouseList({}).then(response => {
                this.warehouseList = response.data.warehouseList
            })
        },
        vueReset() {
            this.materialVisible = false
            this.confirmVisible = false
        },
        vueDelete(row) {
            this.applyOrderInfo.applyForChildOrderVoList.splice(row,1)
        },
        vueEdit(row){
            console.log(row)
            this.updateId = row.$index
            this.confirmMaterialInfo = row.row
            this.confirmVisible = true
        
        },
        addMaterial() {
            this.materialVisible = true            
        },
        materialFetch() {
            getMaterialList(this.searchObj).then(response => {
                this.materialList = response.data.materialList
            })
        },
        materialReset() {
            this.searchObj = {}
        },
        materialAdd(row) {
            this.confirmMaterialInfo = row
            this.confirmVisible = true
        },
        confirmSubmit(confirmMaterialInfo){
            const temp = {}
            temp.famid = this.applyOrderInfo.famid
            temp.fmid = confirmMaterialInfo.fmid
            temp.fmname = confirmMaterialInfo.fmname
            temp.facquantity = confirmMaterialInfo.facquantity
            temp.facstatus = "0"
            temp.facdate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
            temp.facmemo = confirmMaterialInfo.facmemo
            if (this.updateOrCreate) {
                this.applyOrderInfo.applyForChildOrderVoList.splice(this.updateId,1,temp)
            }else {
                this.applyOrderInfo.famstatus = "0"
                this.applyOrderInfo.applyForChildOrderVoList.push(temp)
            }
            this.updateId = null
            this.confirmVisible = false
            this.materialVisible = false
        },
        submitForm(applyOrderInfo) {
            if (this.updateOrCreate) {
                updateApplyOrder(applyOrderInfo).then(response => {
                    this.$message.success('修改申领单成功')
                    this.$parent.fetchData()
                })
                this.dialogClose()
            } else {
                createApplyOrder(applyOrderInfo).then(response => {
                    this.$message.success('创建申领单成功')
                    this.$parent.fetchData()     
                })
                this.dialogClose()
            }
        },
        resetForm() {
            if (this.updateOrCreate){
                console.log('修改状态下不能清空列表')
            }else {
                this.applyOrderInfo.famid = null
                this.applyOrderInfo.fename = null
                this.applyOrderInfo.fammemo = null
                this.applyOrderInfo.famstatus = 0
            }
        },
        resetMaterial() {
            this.applyOrderInfo.applyForChildOrderVoList = []
        },
        // 解决父页面按钮只能点击一次问题
        dialogClose() {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.updateOrCreate = false
            this.$parent.vueReset()
        },
        addDialogClose() {
            this.addMaterial = {}
            this.$emit('closepop')
        }
    }
}
</script>
    